<!-- 佣金中心 -->
<template>
    <view class="page-container">
        <view class="cell" v-for="(item, index) in list" :key="index">
            <view class="cell-left">
                <image src="/static/img/withdraw.png" class="cell-icon"> </image>
            </view>
            <view class="cell-center">
                <view class="cell-title">{{ item.activity.subject }}</view>
                <view class="cell-date">{{ item.create_time }}</view>
            </view>
            <view class="cell-right" :class="{ 'cell-cut': item.amount <= 0 }">
                <button class="btn-primary btn-mini btn-status" :class="status[item.status].value">{{ status[item.status].label }}</button>
                <view class="cell-amount"> +{{ filterPrice(item.amount) }}</view>
            </view>
        </view>
        <load-more :loadingType="loadingType" />
    </view>
</template>
<script>
import { mapGetters } from "vuex"
export default {
    data() {
        return {
            status: {
                0: {
                    label: "未处理",
                    value: "btn-warning"
                },
                1: {
                    label: "提现成功",
                    value: "btn-success"
                },
                2: {
                    label: "提现中",
                    value: "btn-primary"
                },
                3: {
                    label: "提现失败",
                    value: "btn-danger"
                }
            },
            loadingType: "",
            params: {
                page: 1,
                pagesize: 10
            },
            list: []
        }
    },
    computed: {
        filterPrice() {
            return price => Number(((price ?? 0) / 100).toFixed(2))
        }
    },
    onLoad(options) {
        this.params.activity_id = options.id
        this.loadData()
    },
    methods: {
        async loadData(type = "refresh") {
            try {
                if (type === "refresh") {
                    this.$showLoading("加载中")
                    this.params.page = 1
                } else if (this.loadingType) return
                this.loadingType = "loading"
                let { list, total, ...info } = await this.$api.withdrawRecordList(this.params)
                this.info = info
                await this.$setTime(300)
                let loadingType = ""
                if (type === "refresh") {
                    this.list = list
                    if (list.length === 0) loadingType = "nodata"
                    uni.hideLoading()
                } else {
                    this.list = this.list.concat(list)
                }
                if (this.list.length === total && total !== 0) {
                    loadingType = "nomore"
                }
                if (!loadingType) this.params.page++
                this.loadingType = loadingType
            } catch {
                this.loadingType = ""
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.cell {
    padding: 32rpx 24rpx;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 0 30rpx 20rpx 30rpx;
    &-left {
        width: 90rpx;
        height: 90rpx;
        margin-right: 22rpx;
    }
    &-icon {
        width: 100%;
        height: 100%;
    }
    &-center {
        flex: 1;
        font-size: 30rpx;
        color: #333;
    }
    &-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        font-size: 36rpx;
        color: red;
    }
    &-cut {
        color: #333;
    }
    &-title {
        font-size: 30rpx;
        margin-bottom: 16rpx;
    }
    &-date {
        font-size: 24rpx;
        color: #999;
    }
    .btn-status {
        border-radius: 6rpx;
        margin-bottom: 16rpx;
    }
}
</style>
